<template>
	<div>
		<Header></Header>
		<Cover title="综合新闻" subtitle="了解实验室最新动态" img="xwdt.jpg"></Cover>
		<div class="page-content">
			<div class="menu">
				<div
					v-for="(item, index) in tabs"
					class="menu-item"
					:style="activeMenuItem == index ? 'color: #000' : ''"
					:key="item"
					@click="changeMenu(index)"
				>
					{{ item }}
				</div>
			</div>
			<div class="member-list">
				<div v-for="(item) in article" class="member-item" :key="item.url" @click="gotoArticle(item.url)">
					<div class="member-item-info">
						<div class="title">{{ item.title }}</div>
						<div class="subtitle mb-10">{{ item.time }} {{ item.author }}</div>
						<div class="desc">{{ item.content }}</div>
					</div>
					<img class="member-item-picture" :src="item.image" />
					<i class="el-icon-right go"></i>
				</div>
			</div>
		</div>
		<Footer></Footer>
	</div>
</template>

<script>
import axios from '../config/http';
export default {
	name: 'News',
	components: {
		Cover: () => import('@/components/Cover.vue'),
		Header: () => import("@/components/Header.vue"),
    Footer: () => import("@/components/Footer.vue")
	},
	data() {
		return {
			article: [],
			tabs: ['综合新闻', '学术活动'],
			activeMenuItem: 0
		};
	},
	created() {
		this.loadData();
	},

	methods: {
		gotoArticle(url) {
			window.open(url);
		},
		async loadData() {
			let res = await axios.get(`/is/news/list/${this.activeMenuItem}`);
			this.article = res.data.data.data.map((item) => {
				item.time = new Date(item.date).toLocaleDateString();
				return item;
			});
		},
		changeMenu(index) {
			this.activeMenuItem = index;
			this.loadData();
		}
	}
};
</script>
